<%-- 
    Document   : search
    Created on : Nov 28, 2013, 12:48:37 AM
    Author     : THICH HOA DONG TIEN
--%>

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
         <link rel="stylesheet" href="css/style.css" type="text/css"/>
         <link rel="stylesheet" href="css/mystyle.css" type="text/css"/>
         <link rel="stylesheet" href="css/botoncss.css" type="text/css"/>
         <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
         
          <script type="text/javascript" src="jquery/jquery-1.8.0.min.js"></script>
          <script type="text/javascript" >
               <script type="text/javascript">
            $(function() {
                $(".inputsearch").keyup(function()
                {
                    var searchid = $(this).val();
                    var dataString = 'search=' + searchid;
                    if (searchid !== '')
                    {
                        $.ajax({
                            type: "POST",
                            url: "showuserajax.jsp",
                            data: dataString,
                            cache: false,
                            success: function(html)
                            {
                                $("#showhint").html(html).show();
                            }
                        });
                    }else{
                         jQuery("#showhint").hide();
                    }
                    return false;
                });

                jQuery("#showhint").live("click", function(e) {
                    var $clicked = $(e.target);
                    var $name = $clicked.find('.name').html();
                    var decoded = $("<div/>").html($name).text();
                    $('#searchid').val(decoded);
                });
                jQuery(document).live("click", function(e) {
                    var $clicked = $(e.target);
                    if (!$clicked.hasClass("inputsearch")) {
                        jQuery("#showhint").fadeOut();
                    }
                });
                $('#searchid').click(function() {
                    jQuery("#showhint").fadeIn();
                });
                
            });
        </script>
          </script>
        <title>JSP Page</title>
    </head>
    <body>
        
        <form class="search">
            <input class="inputsearch" type="text" name="searchinput" value="" />   
            <input class="btnsearch" type="submit" value="Tìm" name="btnsearch" />
             <div id="showhint"></div>
        </form>
    </body>
</html>
